<template>
	<view>
		<view class="smileService"><image src="../../static/images/smileService.png" mode=""></image></view>

		<view class="exclusive">联系专属客服</view>

		<view class="categoryService">
			<view class="weChat" @click="weixin">微信客服</view>
			<view class="mobile" @click="call">客服电话</view>
		</view>

		<view class="exclusive" v-if="showMobile">客服电话:{{ Kfdata.tel }}</view>

		<view class="exclusive">常见问题</view>

		<!-- <view class="question">
			<view v-for="(item, index) in questionList" :key="index" :class="{ questionStyle: changeStyle === index }" @click="changeQuestion(index, item.article_id)">
				{{ item.title }}
			</view>
		</view> -->
		<view class="questions">
			<view v-for="(item, index) in questionList" :key="index" @click="changeQuestion(index, item.article_id)">
				<text>{{ index + 1 }}、</text>
				<text :class="{ questionStyle: changeStyle === index }">{{ item.title }}</text>
			</view>
		</view>
		<view class="over_line" v-if="isover">----- 我也是有底线的 ------</view>
		<view v-if="!questionList.length" class="notAvailable">暂无问题~</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			questionList: [],
			changeStyle: 0,
			userInfo: {},
			Kfdata: {},
			showMobile: false,
			pagenum: 1, // 页码值
			pagesize: 20, // 每页显示多少条数据
			total: '',
			isover: false, // 判断是否到底部，给用户提示
			isloading: false, // 判断数据是否在加载中
		};
	},
	onLoad() {
		this.getArticleHot();
		this.getUserInfo();
		this.getKfService();
	},
	methods: {
		getKfService() {
			this.$api.getService(res => {
				this.Kfdata = res.data[0];
			});
		},
		changeQuestion(index, id) {
			this.changeStyle = index;
			uni.navigateTo({
				url: '../article/index?id=' + id + '&id_type=1'
			});
		},
		getArticleHot: function() {
			// 正在加载下页数据
			this.isloading = true;
			this.loadStatus = 'loading';
			this.$api.articleList(24, {}, res => {
				this.total = res.data.count;
				this.questionList = [...this.questionList, ...res.data.list];
				// 没有在加载下页数据
				this.isloading = false;
			});
		},
		// 复制微信号
		weixin() {
			let that = this;
			uni.setClipboardData({
				data: that.Kfdata.weixin,
				success: function() {
					that.$common.successToShow('复制成功');
				}
			});
		},
		// 拨打电话
		// telphone(){
		// 	plus.device.dial( this.Kfdata.tel, true);
		// },
		// native.js Native API具有平台依赖性，所以需要通过以下方式判断当前的运行平台：
		call() {
			let that =this
			// #ifdef H5 || MP-WEIXIN
			const photo = that.Kfdata.tel
			uni.makePhoneCall({
				phoneNumber: `{{ photo }}`,
				success: () => {
					// console.log("成功拨打电话")
				},
				fail() {
					this.$common.errorToShow('拨打电话失败');
				}
			})
			// #endif
			
			// #ifdef APP-PLUS
			switch (plus.os.name) {
				case 'Android':
					this.showMobile = false;
					this.telphone()
					break;
				case 'iOS':
					// iOS平台: plus.ios.*
					// alert('iOS');
					uni.makePhoneCall({
						phoneNumber: that.Kfdata.tel + '',
					})
					break;
				default:
					// alert('其它平台');
					// 其它平台
					this.showMobile = true;
					this.$common.errorToShow('暂不支持,请手动拨打客服电话');
					break;
			}
			// #endif
		},
		/**
		 * 获取个人用户信息
		 */
		getUserInfo: function() {
			let that = this;
			that.$api.getUserInfo(res => {
				that.userInfo = res.data;
			}); 
		},
		telphone() {
			let that = this
			plus.android.requestPermissions(
				['android.permission.CALL_PHONE'],
				function(e) {
					// if (e.deniedAlways.length > 0) {
					// 	//权限被永久拒绝
					// 	// 弹出提示框解释为何需要权限，引导用户打开设置页面开启
					// 	console.log('Always Denied!!! ' + e.deniedAlways.toString());
					// }
					// if (e.deniedPresent.length > 0) {
					// 	//权限被临时拒绝
					// 	// 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限
					// 	console.log('Present Denied!!! ' + e.deniedPresent.toString());
					// }
					if (e.granted.length > 0) {
						//权限被允许
						var activity = plus.android.runtimeMainActivity();
						// 导入Activity、Intent类
						var Intent = plus.android.importClass('android.content.Intent');
						var Uri = plus.android.importClass('android.net.Uri');
						// 获取主Activity对象的实例
						var main = plus.android.runtimeMainActivity();
						// 创建Intent
						var uri = Uri.parse('tel:' + that.Kfdata.tel); // 这里可修改电话号码
						var call = new Intent('android.intent.action.CALL', uri);
						// 调用startActivity方法拨打电话
						main.startActivity(call);
						// console.log('Granted!!! ' + e.granted.toString());
					}
				},
				function(e) {
					thaht.$common.errorToShow('请到设置修改拨打电话权限')
					// console.log('Request Permissions error:' + JSON.stringify(e));
				}
			);
		}
	},
	onReachBottom() {
		if (!this.questionList.length) {
			return;
		}
		// 判断当前是否正在请求数据中
		if (this.isloading) {
			return;
		}
		if (this.pagesize * this.pagenum >= this.total) {
			this.isover = true;
			return;
		}
		this.pagenum++;
		this.getArticleHot();
	}
};
</script>

<style lang="less">
page {
	background-color: #ffffff;
}
.smileService {
	image {
		height: 320rpx;
		width: 100%;
	}
}

.exclusive {
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #242628;
	height: 70rpx;
	line-height: 70rpx;
	border-bottom: 2rpx solid #eef3ed;
	padding-left: 60rpx;
}
.questions {
	font-size: 26rpx;
	font-family: PingFang SC;
	color: #242628;
	padding-left: 60rpx;
	view {
		height: 70rpx;
		line-height: 70rpx;
	}
	.questionStyle {
		color: blue;
	}
}
.over_line {
	text-align: center;
	background-color: #f5f5f5;
	font-size: 26rpx;
	color: #999;
	padding: 20rpx 0;
}
.notAvailable {
	width: 100%;
	height: 150rpx;
	text-align: center;
	line-height: 200rpx;
	font-size: 24rpx;
	color: #666;
}

.categoryService {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 230rpx;
	border-bottom: 2rpx solid #eef3ed;
	view {
		width: 327rpx;
		height: 95rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
		color: #ffffff;
		padding-left: 60rpx;
	}
	.weChat {
		background: url(../../static/images/weChat.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.mobile {
		background: url(../../static/images/telephone.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}
}
</style>
